<script setup>
import { useUserStore } from '@/stores/user';
// eslint-disable-next-line import/no-duplicates
import api4j from '@/api/example';
// eslint-disable-next-line no-unused-vars
import { Dialog, Toast } from 'vant';
import { EiInfo } from '@eplat/ei';
import JWeixin from 'weixin-js-sdk';
import { queryUrlParam } from '@/utils/tools';
// eslint-disable-next-line import/no-duplicates,no-unused-vars
import SERVICE from '@/api/example';
// eslint-disable-next-line no-unused-vars
const router = useRouter();
const user = useUserStore();
const loading = ref(false);
const finish = ref(false);
const data = [];
// 授权
JWeixin.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: api4j.APPID, // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
JWeixin.ready(async () => {
  // 获取用户code
  const code = queryUrlParam('code');
  // 没有授权code
  if (code == null) {
    // Toast('授权失败');
    // 跳转到授权页面
    window.location.href =
      'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
      api4j.APPID +
      '&redirect_uri=https%3A%2F%2F' +
      api4j.SERVER_DOMAIN +
      '%2F%23%2FWX%2FWD%2FWXWD11&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&forcePopup=true';
  } else {
    // 本地没有token新授权
    if (user.getToken == '' || user.getToken == undefined) {
      // Toast('正在授权');
      const postEiInfo = new EiInfo();
      postEiInfo.set('code', code);
      // 通过code获取用户信息
      await api4j.wxLogin(postEiInfo).then((res) => {
        // 如果授权无效 重新授权
        if (res.status !== 1) {
          // Toast(res.msg);
          window.location.href =
            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
            api4j.APPID +
            '&redirect_uri=https%3A%2F%2F' +
            api4j.SERVER_DOMAIN +
            '%2F%23%2FWX%2FWD%2FWXWD11&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&forcePopup=true';
          return;
        }
        // Toast(res.msg);
        // token info存放本地
        user.setUserInfo(
          res.extAttr.token,
          res.extAttr.userInfo.attrs.headimgurl,
          res.extAttr.userInfo.attrs.nickname
        );
        user.setUserNameTel(res.extAttr.username, res.extAttr.phone);

        onLoad();
      });
    }
  }
});
const page = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
// 限流开关
const flag = ref(true);
const count = ref(0);
const onLoad = () => {
  loading.value = true;
  if (flag.value) {
    applyList();
  }
  loading.value = false;
};

const applyList = async () => {
  loadings.value = true;
  flag.value = false;
  const postEiInfo = new EiInfo();
  postEiInfo.set('token', user.getToken);
  await api4j
    .RCRM0103_ZJJfJl(postEiInfo)
    .then((res) => {
      count.value++;
      console.log('res', res);
      page.result = [];
      // const data = [
      //   {
      //     htName: '2023年9月',
      //     payPeople: '曾豪杰',
      //     payTime: '2023-09-03 14:20:21',
      //     payMoney: '869.00',
      //     list: [
      //       {
      //         label: '在线支付:',
      //         money: '153.20'
      //       },
      //       {
      //         label: '重庆星铂酒店管理有限公司',
      //         money: '13.20'
      //       },
      //       {
      //         label: '重庆星铂酒店管理有限公司',
      //         money: '213.20'
      //       }
      //     ]
      //   }
      // ];
      const data = res.extAttr.datas;
      datas.value = res.extAttr.datas;
      if (data.length === 0) {
        page.result = [];
      } else {
        page.result.push(...data);
        // 限流
        if (count.value % 5 == 0) {
          setInterval(function () {
            flag.value = true;
          }, 10000);
        } else {
          flag.value = true;
        }
      }
      loadings.value = false;
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const loadings = ref(false);
const datas = ref([]);
function formatDateTime(dateTimeString) {
  const year = dateTimeString.substring(0, 4);
  const month = dateTimeString.substring(4, 6);
  const day = dateTimeString.substring(6, 8);
  const hours = dateTimeString.substring(8, 10);
  const minutes = dateTimeString.substring(10, 12);
  const seconds = dateTimeString.substring(12, 14);

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>
<template>
  <van-list
    v-model:loading="loading"
    class="working-list"
    :finished="finish"
    finished-text=""
    offset="1"
    @load="onLoad"
  >
    <div>
      <div
        style="
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          background: #4b75e5;
          height: 65px;
          color: white;
          z-index: 1000;
        "
      >
        <div style="font-size: 20px; padding-top: 20px; text-align: center">缴费记录</div>
        <van-button
          to="/WX/WD/WXWD02"
          style="
            background-color: #4b75e5;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #4b75e5;
            margin-top: -32px;
            margin-left: 20px;
          "
        >
          <img
            src="@/assets/tb166.svg"
            style="width: 35px; height: 35px; margin-top: 3px; margin-left: -20px"
          />
        </van-button>
      </div>
      <div>
        <van-loading v-if="loadings" type="spinner" style="margin-top: 75px; text-align: center" />
      </div>
      <div v-if="datas.length == 0" style="margin-top: 30%; color: gray; text-align: center">
        暂无数据
      </div>
      <div style="margin-top: 85px">
        <van-cell-group
          v-for="(item, index) in page.result"
          :key="index"
          class="form-cell-group"
          inset
        >
          <div style="margin-top: 15px"></div>
          <div style="display: flex; margin-left: 15px">
            <div style="width: 70%">
              <div class="item-value group1">
                <span style="font-size: 16px; color: #505050; font-weight: bold">
                  合同名称：{{ item.htName }}
                </span>
              </div>
              <div style="margin-top: 10px">缴费人：{{ item.payPeople }}</div>
              <div style="margin-top: 10px">缴费时间：{{ formatDateTime(item.payTime) }}</div>
              <div style="margin-top: 10px">
                缴费金额：<sapn style="color: #c66060">{{ item.payMoney }}元</sapn>
              </div>
            </div>

            <div
              style="
                margin-left: 5%;
                margin-top: 7%;
                width: 70px;
                height: 70px;
                background-color: transparent; /* 删除背景颜色 */
                border-radius: 50%;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: inset 0 0 1px 1px #7dd7a2, inset 0 0 1px 1px #7dd7a2; /* 添加内描边 */
              "
            >
              <div
                style="
                  width: 60px;
                  height: 60px;
                  background-color: transparent; /* 删除背景颜色 */
                  border-radius: 50%;
                  text-align: center;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  box-shadow: inset 0 0 1px 1px #7dd7a2, inset 0 0 1px 1px #7dd7a2; /* 添加内描边 */
                "
              >
                <div>
                  <span style="color: black">已缴费</span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-left: 15px; margin-top: 10px">
            <span style="color: #a6a6a6">明细如下:</span>
          </div>
          <div
            v-for="(items, index) in item.list"
            style="margin-left: 15px; margin-top: 10px; display: flex"
          >
            <div>{{ items.label }}</div>
            <div style="margin-left: 5%; color: #c66060; margin-top: 1px; width: 90px">
              {{ items.money }}元
            </div>
            <div>
              <span style="color: #e7a748; font-size: 14px"
              >{{ items.time }} </span>
            </div>
          </div>
          <div style="margin-bottom: 20px"></div>
        </van-cell-group>
      </div>
    </div>
  </van-list>
</template>

<style lang="stylus" scoped>
.page-main

  .working-list
    .item
      padding-top 0px
      padding-bottom 0px
    .title1
      color #003586
      font-weight bolder
      font-size 13px
    .titles
      color #161718
      font-weight bolder
      font-size 13px
    .titless
      color #161718
      font-weight bolder
      font-size 17px
    .title2
      color #808080
      font-size 13px
    padding 4px
    margin-bottom 48px
    .van-tag
      margin-left 5px
      font-size 12px
      padding 5px
    .btn1
      background-color #038008
      border-radius 5px
      margin-left 5px
    .btn0
      background-color #ff8d1a
      border-radius 5px
      margin-left 5px
    .class1
      background-color #99bcf1
      border-radius 5px
    .class2
      background-color #f19999
      border-radius 5px
    .class3
      background-color #99a6f1
      border-radius 5px
    .card-item
      margin 8px
      background-color white

      .item-value
        display flex
        justify-content space-between
        overflow hidden
        text-overflow ellipsis
        word-break keep-all
        white-space nowrap
        background-color transparent
        .group1
          display flex
          flex-direction row
          justify-content space-between

  .bottom-buttons
    position fixed
    bottom 12px
    left auto
    width 100%
    max-width var(--max-width)
</style>
